<script setup>
import { onMounted } from 'vue'

import { useFeedbacks } from '@/stores/feedback.js'
import { storeToRefs } from 'pinia'

const feedback = useFeedbacks()
const { curPage, pageSize, aqis , states, filterData, value} = storeToRefs(feedback)



onMounted(() => {
  feedback.loadDATA()
  feedback.loadAQIs()
})

const detail = (index, row) => {
  feedback.undoDetail(index, row)
}
</script>

<template>
  <el-card style="width: 100%;height: 100%;background-color: #fafafa">
    <template #header>
      <el-segmented v-model="value" :options="states" />
    </template>
    <template #default style="max-height: 500px;flex: 1">
      <el-table :data="filterData.slice((curPage - 1)*pageSize, curPage * pageSize)"
                stripe style="width: 100%;flex: 1"
      >
        <el-table-column prop="id" label="#" width="100"/>
        <el-table-column prop="pname" label="反馈人"/>
        <el-table-column prop="address" label="反馈地点"/>
        <el-table-column label="预估污染">
          <template #default="item">
            <el-tag
              :style="{ backgroundColor: aqis.find(a => a.id === item.row.aid).color }"
              style="color: white; font-weight: bold"
            >
              {{ aqis.find(a => a.id === item.row.aid).expln }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createtime" label="反馈时间"/>

        <el-table-column prop="gname" label="网格员"/>
        <el-table-column label="状态">
          <template #default="item">
          <el-tag>{{states[item.row.state]}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" >
          <template #default="item">
            <el-button @click="detail(item.$index, item.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template #footer style="max-height: 50px">
      <el-pagination
        v-model:current-page="curPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="filterData.length"
      />
    </template>

  </el-card>
</template>

<style scoped lang="scss">

</style>